<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="color-scheme" content="light dark">
        <meta name="google" value="notranslate">
        <title>{{ path }} 的索引</title>
        <style>
            h1 {
                border-bottom: 1px solid #c0c0c0;
                margin-bottom: 10px;
                padding-bottom: 10px;
                white-space: nowrap;
            }

            table {
                border-collapse: collapse;
            }

            th {
                cursor: pointer;
            }

            td.detailsColumn {
                padding-inline-start: 2em;
                text-align: end;
                white-space: nowrap;
            }

            a.icon {
                padding-inline-start: 1.5em;
                text-decoration: none;
                user-select: auto;
            }

            a.icon:hover {
                text-decoration: underline;
            }

            a.file {
                background : url("") left top no-repeat;
            }

            a.dir {
                background : url("") left top no-repeat;
            }

            a.up {
                background : url("") left top no-repeat;
            }

            html[dir=rtl] a {
                background-position-x: right;
            }

            #parentDirLinkBox {
                margin-bottom: 10px;
                padding-bottom: 10px;
            }
        </style>
        <script>
            const map = {
                'B': 'KB',
                'KB': 'MB',
                'MB': 'GB',
                'GB': 'TB',
                'TB': 'PB',
                'PB': 'EB',
                'EB': 'ZB',
                'ZB': 'YB',
                'YB': 'MAX'
            };
            function formatBytes(num) {
                let unit = 'B';
                while(num >= 1024 && map[unit]!== 'MAX') {
                    num /= 1024;
                    unit = map[unit];
                } 
                return num == 0
                    ? '0 B'
                    : String(num.toFixed(1)) + ' ' + unit;
            }
        </script>
    </head>
    <body>
        <h1 id="header">{{ path }} 的索引 - FNK Server</h1>
        {% if path != '/' and path != 'F:\\' and path != 'D:\\' and path != 'E:\\' and path != 'C:\\' %}
            <div id="parentDirLinkBox" style="display: block;">
                <a id="parentDirLink" class="icon up" href="/cons/file?path={{ path + '/..' }}">
                    <span id="parentDirText">[上级目录]</span>
                </a>
            </div>
        {% endif %}
        <table>
            <thead>
                <tr class="header" id="theader">
                    <th id="nameColumnHeader" tabindex="0" role="button">名称</th>
                    <th id="sizeColumnHeader" class="detailsColumn" tabindex="0" role="button">
                      大小
                    </th>
                    <th id="dateColumnHeader" class="detailsColumn" tabindex="0" role="button">
                      修改日期
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for file in files %}
                    <tr>
                        <td class="nameColumn">
                                <a class="icon {{ 'file' if file[2] else 'dir' }}" href="/cons/file?path={{ file[1] }}">{{ file[0] }}</a>
                        </td>
                        <td class="sizeColumn detailsColumn">{{ file[3] if file[2] else '' }}</td>
                        <td class="dateColumn detailsColumn">{{ file[4] }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <script>
            var sizeColumns = document.getElementsByClassName("sizeColumn");
            for(var i=0;i<sizeColumns.length;i++) {
                if (sizeColumns[i].innerHTML !== '') {
                    sizeColumns[i].innerHTML = formatBytes(parseInt(sizeColumns[i].innerHTML));
                }
            }
        </script>
    </body>
</html>